<template>
    <div class="deepseekContent">
        <div class="deepseekBox">
            <div class="answerBox">
                <div class="answerBoxText" v-if="reasoningContent">
                    <p style="margin: 20px 0;" v-if="reasoningContent">{{ '思考：' }}</p>
                    <p>{{ reasoningContent }}</p>
                    <p style="margin: 20px 0;" v-if="answerContent">{{ '答案：' }}</p>
                    <p>{{ answerContent }}</p>
                </div>
                <div v-else>
                    <p style="margin: 20px 0;font-size: 16px;">{{ '技术栈支持来自：' }}</p>
                    <br/>
                    <a style="font-size: 16px;margin-left: 40%;color: aqua;text-decoration:underline;" href="https://www.deepseek.com/">deepseek</a>
                    <br/>
                    <p style="margin: 20px 0;"></p>
                    <br/>
                    <a style="font-size: 16px;margin-left: 40%;color: #f60;text-decoration:underline;" href="https://bailian.console.aliyun.com/">阿里云百炼</a>
                    <!-- <iframe
                        id="iframe"
                        style="width: 100%; height: 300px; display: block; border: none"
                        frameborder="0"
                        src="https://www.deepseek.com/"
                    ></iframe> -->
                </div>
            </div>
            <div class="qusetionText">
                <van-field
                    v-model="qusetion"
                    rows="3"
                    autosize
                    label=""
                    type="textarea"
                    maxlength="1000"
                    placeholder="请在此区域输入问题"
                    show-word-limit
                    clearable
                    style="border: 1px solid #eee;border-radius: 16px;"
                />
            </div>
            <div class="qusetionTextBtn">
                <van-button
                    style="width: 100%;background: #15256a;color: #FFF;border-radius: 16px;border: none; transition: all 0.3s ease;"
                    @click="main('wei', qusetion)"
                >
                    提交
                </van-button>
            </div>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showNotify } from 'vant'
import OpenAI from "openai";
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const route = useRoute()
const router = useRouter()


const qusetion = ref<string>('')

const answerRole = ref<string>('')
const reasoningContent = ref<string>('')
const answerContent = ref<string>('')
const isAnswering = ref<boolean>(false)


// deepseek关闭了充值入口，暂时无法调用
// const openai = new OpenAI({
//     baseURL: 'https://api.deepseek.com',
//     // apiKey: 'sk-9f6ad23c1ca348d39fafa90cda3b9992', // 本体 API key
//     dangerouslyAllowBrowser: true,
// });

// 阿里云百炼大模型
const openai = new OpenAI(
    {
        // 若没有配置环境变量，请用百炼API Key将下行替换为：apiKey: "sk-xxx",
        apiKey: 'sk-748b2cc5c5d84c3aa7220757b697ce29', // 阿里给的 API key
        baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1",
        dangerouslyAllowBrowser: true,
    }
);

async function main(user, contentStr) {
    if (qusetion.value == '') {
        showToast('请输入问题')
        return
    }
    isAnswering.value = false;
    reasoningContent.value = ''
    answerContent.value = ''
    settings.handlerLoadingShow(true)
    try {
        const stream: any = await openai.chat.completions.create({
            // model: "deepseek-chat",
            model: "deepseek-r1",  // 此处以 deepseek-r1 为例，可按需更换模型名称。
            messages: [
                // { role: "system", content: "You are a helpful assistant." },
                { role: 'user', content: contentStr },
            ],
            stream: true,
        })
        settings.handlerLoadingShow(false)
        for await (const chunk of stream) {
            if (!chunk.choices?.length) {
                continue;
            }
            const delta = chunk.choices[0].delta;
            // 思考过程
            if (delta.reasoning_content) {
                reasoningContent.value += delta.reasoning_content;
            } else if (delta.content) {
                if (!isAnswering.value) {
                    isAnswering.value = true;
                }
                answerContent.value += delta.content;
            }
        }
    } catch (error) {
        settings.handlerHeaderShow(false)
        console.error('Error', error);
        showFailToast('提问失败，请稍后再试')
    }
    // console.log('completion', completion);
    // answerRole.value = completion.choices[0].message.role // 机器人名字
    // reasoningContent.value = completion.choices[0].message.reasoning_content // 思考过程
    // answerContent.value = completion.choices[0].message.content // 最终答案
}


onMounted(() => {
    showNotify({
        message: `由于deepseek官方关闭了充值入口，目前使用阿里云百炼大模型代替，到达上限后无法调用请联系管理员。`,
        color: '#FFFFFF',
        background: '#bca1f3',
        duration: 2500, // 持续时间，单位为毫秒
        position: 'top', // 位置，可以是 'top'、'bottom'、'top-left'、'top-right'、'bottom-left'、'bottom-right'
    });
})

</script>


<style lang="scss" scoped>
.deepseekContent {
    width: 100%;
    min-height: 100%;
    height: auto;
    position: relative;
    padding: 15px;
    .deepseekBox {
        width: 100%;
        .answerBox {
            width: 100%;
            height: 300px;
            border: 1px solid #eee;
            border-radius: 16px;
            padding: 10px;
            overflow-y: scroll;
            .answerBoxText {
                width: 100%;
                min-height: 300px;
                p {
                    font-size: 16px;
                    letter-spacing: 2px; /* 增加2像素的间距 */
                    line-height: 120%;
                }
            }
        }
        .qusetionText {
            width: 100%;
            height: auto;
            margin-top: 30px;
        }
        .qusetionTextBtn {
            margin: 20px 0;
        }

    }
}
</style>